/*
 * @Author: zhangzhen
 * @Date: 2022-07-21 14:05:11
 * @LastEditors: zhangzhen
 * @LastEditTime: 2022-10-20 15:35:26
 *
 */

import React, { useState } from 'react'
import { useAppDispatch, useAppSelector } from '@/redux/hook'
import { setNowImg, setBackgroundImg, deleteBackgroundImg } from '@/redux/slice'
import styles from './index.module.scss'
import { shallowEqual } from 'react-redux'
import { Button, Input, Modal } from 'antd'

const { TextArea } = Input

const BackgroundImgBox = () => {
  const { backgroundImg } = useAppSelector(({ state }) => ({ ...state }), shallowEqual)
  const dispatch = useAppDispatch()

  const [visible, setVisible] = useState<boolean>(false)
  const [newImgUrl, setNewImgUrl] = useState<string>()

  return (
    <div className={styles.bgcImgPage}>
      <div className={styles.imgBox}>
        {backgroundImg.map((item) => {
          return (
            <span key={item} className={styles.bgcImgBox}>
              <img
                src={item}
                alt="#"
                className={styles.bgcImg}
                onClick={() => {
                  dispatch(setNowImg(item))
                }}
              />
              <span
                className={styles.closeImg}
                onClick={() => {
                  dispatch(deleteBackgroundImg(item))
                }}
              >
                ×
              </span>
            </span>
          )
        })}
      </div>
      <Button
        type="primary"
        disabled={backgroundImg.length === 8}
        onClick={() => {
          setVisible(true)
        }}
      >
        添加
      </Button>

      <Modal
        okText="确定"
        cancelText="取消"
        destroyOnClose
        width={400}
        title="添加背景"
        open={visible}
        onCancel={() => {
          setVisible(false)
        }}
        onOk={() => {
          dispatch(setBackgroundImg(newImgUrl))
          setVisible(false)
        }}
      >
        <TextArea
          placeholder="请输入背景图片链接地址"
          onChange={(e) => {
            setNewImgUrl(e.target.value)
          }}
        />
      </Modal>
    </div>
  )
}

export default BackgroundImgBox
